<template>
  <div  class='relative'>
  	<!-- 搜索栏 -->
  	<a-row>
		<a-col :span="12"  class='mb20'>
				<a-input  placeholder="请输入产品名称"  class='w200'  v-model='search.keyWord'   />  <!-- allowClear  input长度会设置成100%  -->
				<a-button type="primary"  @click='pageInit()'>搜索</a-button>
				<!-- <a-icon type="loading-3-quarters"  spin  :style="{ fontSize: '16px', color: '#1890ff' }"/>  -->
		</a-col>

		<a-col  :span='4'  style='float: right;'>
			 <a-button type="primary" icon="plus-circle"  @click='addProduct'>新建</a-button>
		</a-col>
	</a-row>
	<!-- 操作按钮 -->
	<!-- <a-row  class='mb20'  >   -->
		<!-- style='position: absolute;right: 90px;top:40px;' -->
	      	<!-- <router-link  to='/product/add'> <a-button type="primary" icon="plus-circle">新建</a-button></router-link> -->
	<!-- </a-row> -->
	<!-- 表格切换 -->
	<a-tabs v-model='search.type' @change="productChange"  type='card'  animated>
      <a-tab-pane tab="地产类" key="1"></a-tab-pane>
      <a-tab-pane tab="政信类" key="2" forceRender></a-tab-pane>  
    </a-tabs>
    <a-spin   :indicator="indicator"  tip="正在加载中..."  :spinning='spinning'  :delay="delayTime">
		<a-table :columns="columns" :dataSource="data"  :rowKey="record => record.code" :pagination="pagination"  @change="handleTableChange">
			 
			<span slot="type"  slot-scope="text, record">{{text | productType}}</span>
			<span slot="release"  slot-scope="text, record">{{text | formatDates}}</span>
			<span slot="key_point"  slot-scope="text, record,index" >
				<a-popconfirm title="更改当前推荐状态？" @confirm="modifyRecommond(record.code,record.isRecommend)"   okText="确认" cancelText="取消">
					<a-icon type="star" class='cursor key_point'  :theme='record.isRecommend==1 ? "filled":"outlined"'  />
				</a-popconfirm>

			</span>
			<span slot="createTime"  slot-scope="text, record">{{text | formatDate}}</span>

			<span slot="action" slot-scope="text, record">
			  <router-link  :to='{path:"/product/info",query:{code:record.code}}'  class='color-blue'> 详情</router-link>
			  <a-divider type="vertical" />
			  <router-link  :to='{path:"/product/edit",query:{code:record.code}}'  class='color-blue'> 编辑 </router-link>
			  <a-divider type="vertical" />
				<a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(record.code)"   okText="确认" cancelText="取消">
				    <a href="javascript:;"  class='color-red'>删除</a>
				</a-popconfirm>
			</span>
		</a-table>
	</a-spin>
  </div>
</template>

<script>
import { listProduct,delproduct,submitProduct }  from  '@/api/product/index'
export default {
  name: 'product',
  data () {
    return {
    	spinning:false,
    	indicator:<a-icon type="loading-3-quarters"  spin  style="{ fontSize: '16px' }"/> ,
    	delayTime:1000,
    	icon_theme:'outlined',
    	currentIndex:null,
    	/*表格栏*/
      	columns:[{
      			title: '产品名称',
			  dataIndex: 'name',
			  key: 'name', 
			  scopedSlots: { customRender: 'name' },
			  width:300
			},  {
			  title: '产品类型',
			  dataIndex: 'type',
			   scopedSlots: { customRender: 'type' },
			}, {
			  title: '产品规模（万元）',
			  dataIndex: 'size',
			}, {
			  title: '起投金额（万元）',
			  dataIndex: 'startingAmt',
			}, {
			  title: '发行时间',
			  dataIndex: 'releaseTime',
			  scopedSlots: { customRender: 'release' },
			}, {
			  title: '创建人',
			  dataIndex: 'createUserName',
			},
			{
			  title: '创建时间',
			  dataIndex: 'createTime',
			  scopedSlots: { customRender: 'createTime' },
			},  {
			  title: '是否推荐',
			  dataIndex: 'key_point',
			  scopedSlots: { customRender: 'key_point' },
			},  
			{
			  title: '操作',
			  key: 'action',
			  scopedSlots: { customRender: 'action' },
			}],
		/*地产类*/
		data:[],
		
		search:{
			keyWord:'',
			pageNo:1,
			pageSize:10,
			type:'1',
		},
		
		pagination:{
	        total:0,
	        pageSize: 10,//每页中显示10条数据
	        showSizeChanger: true,

	        pageSizeOptions: ["10", "20"],//每页中显示的数据
	        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
	      },   

 
		                                                                                           
    }
  },
  created(){	
  	let hashIndex = this.$route.hash.slice(1)
  	this.search.type = hashIndex ? hashIndex :'1'
  	this.pageInit()
  },
  methods:{
  	
  	async pageInit(){ 
  		this.spinning = true
  		await listProduct(this.search).then((res)=>{
  			if(res.data.flag == true){
  				this.data = res.data.dataList
  				this.pagination.total = res.data.totalRs
  			}
  			this.spinning = false
  		})
  		
  	},
  	addProduct(){ 
  		this.$router.push('/product/add#'+this.search.type)
  	},
  	modifyRecommond(code,index){
  		let isRecommend = index=='0' ? '1' :'0'
  		submitProduct('/op/product/modify_product',{code,isRecommend}).then((res)=>{
		  	if(res.data.flag == true){
		  		this.$message.success(res.data.msg)
		  		this.pageInit()
		  	}
		})
  	},
	leaveStar(){
		this.currentIndex=null
	},
	// 标记为重点推荐 或删除重点推荐
	starProduct(code){

	},
  	 confirmDel(code){
      delproduct(code).then((res)=>{
      	if(res.data.flag == true){
      		this.$message.success(res.data.msg)
      		this.pageInit()
      	}
      })
    },
    productChange(val){ 
    	this.search.keyWord = ''
    	// this.search.type = val
    	this.search.pageNo = 1
    	this.search.pageSize = 10
    	this.pageInit()
    },
     /*table页数变化*/
    handleTableChange (pagination, filters, sorter) {
        // console.log(pagination);
        this.search.pageNo = pagination.current
        this.search.pageSize =pagination.pageSize
        this.pageInit()
    },
    
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ant-input{width: 200px;}
.key_point:hover{ }
</style>
